import { Link } from 'react-scroll';

import { OpenShareModalButton } from '@/features/Share';
import { useWindowSize } from 'usehooks-ts';

import { SectionType } from '..';

import cs from './NavigationCard.module.scss';

export const NavigationCard = ({ sections }: { sections: SectionType[] }) => {
  const { width } = useWindowSize();
  return (
    <div className={cs.card} id="page-nav">
      <div className={cs.buttons}>
        {sections.map(({ id, title }) => (
          <Link
            className={cs.button}
            duration={400}
            href={`#${id}`}
            key={id}
            offset={width < 1024 ? -90 : -126}
            smooth
            spy
            to={id}
          >
            {title}
          </Link>
        ))}
      </div>
      <OpenShareModalButton
        data={{
          title: 'О прикорме',
          text: 'Как вводить первый прикорм? Правила, советы, ошибки, мифы по введению прикорма.',
        }}
        variant="big"
      />
    </div>
  );
};
